import { useModel, history, useLocation } from "umi";
import { Breadcrumb, Avatar, Space, Image as AntdImage, notification, message } from "antd";
import { IconHome, IconHelpCircle, IconMinus, IconMinimize, IconMaximize, IconClose } from "@douyinfe/semi-icons";
import { useEffect } from "react";
import { useReactive } from "ahooks";
import Jdenticon from "react-jdenticon";
import "./main.header.css";

const MainHeader = () => {
    const { isMaximized } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { breadcrumbs } = useModel("routers");
    const { identity } = useModel("person.info");
    const { applicationName, remoteApplication } = useModel("application.info");
    const location = useLocation();

    const state = useReactive({
        title: "",
    });

    useEffect(() => {
        let appTitle = remoteApplication?.appName || applicationName;
        let appVer = window.applicationVersion || remoteApplication?.appVeno || "";
        state.title = appTitle + " - " + appVer;
    }, [remoteApplication]);

    useEffect(() => {
        document.title = state.title;
    }, [state.title]);

    document.title = state.title;

    const toggleWindow = () => {
        isMaximized ? currentWindow.restore() : currentWindow.maximize();
    };

    const closeClick = () => {
        window.close();
        currentWindow.close();
    };

    const openFeedBack = async () => {
        if (identity !== "remoteLogined") return message.warning("需要远程登录，才能提交意见反馈");
        let res = electron.ipcRenderer.sendSync("open-feedback", {
            currentWindowID: currentWindow.id,
            oiUuid: window.organizationUuid,
            aiUuid: window.applicationUuid,
            aiSduu: remoteApplication?.appSduu,
            aiPath: location.pathname,
            feedbackPath: "/#/feedback/application",
        });
        if (res) {
            notification.error({ message: res.message, description: res.result });
        }
    };

    let controls = [
        <a key="home" onClick={() => history.replace({ pathname: "/" })}>
            <IconHome />
        </a>,
        <a key="feedback" title="需求建议问题反馈" onClick={openFeedBack}>
            <IconHelpCircle />
        </a>,
        <a key="minimize" title="最小化当前窗口" onClick={() => currentWindow.minimize()}>
            <IconMinus />
        </a>,
        <a key="maximized" onClick={toggleWindow}>
            {isMaximized ? <IconMinimize title="恢复当前窗口" /> : <IconMaximize title="最大化当前窗口" />}
        </a>,
        <a key="close" title="关闭应用" onClick={closeClick}>
            <IconClose />
        </a>,
    ];

    const appIcon =
        kuboUrl && remoteApplication?.appIcon ? (
            <AntdImage width={14} src={kuboUrl + remoteApplication.appIcon} preview={false} style={{ padding: "2px 0 " }} />
        ) : (
            <Jdenticon size="18" value={remoteApplication?.appName || applicationName} />
        );

    return (
        <div className="header drag">
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <Space>
                    <Avatar shape="square" size={20} icon={appIcon} style={{ marginTop: -7, backgroundColor: remoteApplication?.appBgco || "#efefef" }} />
                    <div style={{ height: 35, lineHeight: "30px" }}>{state.title}</div>
                </Space>
                <Breadcrumb
                    items={breadcrumbs.map((item) => ({ key: item.pathname, title: item.title }))}
                    className="no-drag"
                    style={{ lineHeight: "30px" }}
                    itemRender={(item) => <a>{item.title}</a>}
                ></Breadcrumb>
                <div className="controls no-drag">
                    <Space size={0}>{controls.map((item) => item)}</Space>
                </div>
            </div>
        </div>
    );
};

export default MainHeader;
